<template>
	<view>
		<list class="note_list">
			<cell class="note_item" v-for="(item,index) in dataList" @tap="toDetail(index)">
				<view class="item_top">
					<image src="../../static/icon_course_detail_tk.png"></image>
					<text>来源:{{item.topicName}}</text>
				</view>
				<view class="item_bottom" v-html="item.content">

				</view>
				<view class="date_item">

					<text>{{item.createdTime}}</text>
                    <text @click.stop="toDel(index)">删除</text>
				</view>
			</cell>
		</list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: []
			}
		},
		onReady() {
			this.getNoteList();
		},
		methods: {
			getNoteList:function(){
				var that=this;
				uni.request({
					url:this.baseUrl+'myStudentNoteList',
					method:'POST',
					data:{
						'stuId':uni.getStorageSync('uid'),
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success:function(res){
						
						if(res.data.code==0){
							that.dataList=res.data.studentNoteList;
							console.log(that.dataList)
						}
					}
				})
			},
			toDetail: function(index) {
				//跳转到笔记详情
				var id = this.dataList[index].id;
				console.log(id);
				uni.navigateTo({
					url: "../noteDetail/noteDetail?id=" + id+'&content='+ this.dataList[index].content
				})
			},
			toDel:function(index){
				var that=this;
				var id = this.dataList[index].id;
				//删除笔记
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除这条笔记吗？',
					success: function (res) {
						if (res.confirm) {
							
							uni.request({
								url:that.baseUrl+'studentNote/delete',
								method:'POST',
								data:{
									'id':id,
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
								},
								success:function(res){
									if(res.data.code==0){
										that.getNoteList();
									}
								}
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				
			}
		}
	}
</script>

<style>
	.note_item {
		background: #FFFFFF;
		margin: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		display: block;
		border-radius: 10rpx;
	}

	.note_item .item_top {
		font-size: 30rpx;
		color: #222222;

	}

	.note_item .item_top image {
		height: 36rpx;
		width: 34rpx;
	}

	.note_item .item_top text {
		margin-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.note_item .item_bottom {
		margin-top: 10rpx;
		color: #888888;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.note_item .item_bottom p {
		display: none;
	}

	.note_item .item_bottom p:nth-child(1) {
		display: block;


	}

	.note_item .date_item {
		height: 48rpx;
		color: #888888;
		font-size: 24rpx;
		display: flex;
		line-height: 48rpx;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.note_item .date_item text{
		height: 48rpx;
		line-height: 48rpx;
		display: inline-block;
	}
	.note_item .date_item text:nth-child(2){
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
</style>
